<project-header class="top-header"></project-header>
  <project-page>

    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <div ng-if="!loaded">Loading...</div>
            <div ng-if="deployment">
              <h1>
                {{deployment.metadata.name}}
                <span
                  ng-if="deploymentConfigMissing"
                  class="pficon pficon-warning-triangle-o"
                  style="cursor: help; vertical-align: middle;"
                  data-toggle="tooltip"
                  data-trigger="hover"
                  title="The deployment's deployment config is missing."
                  aria-hidden="true">
                </span>
                <span ng-if="deploymentConfigMissing" class="sr-only">Warning: The deployment's deployment config is missing.</span>
                <small class="meta">created <relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp></small>
                <div class="pull-right dropdown" ng-hide="!('deployments' | canIDoAny)">
                  <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                    Actions
                    <span class="caret"></span>
                  </button>
                  <a href=""
                     class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                     data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                  <ul class="dropdown-menu actions action-button">
                    <li ng-if="'replicationcontrollers' | canI : 'update'">
                      <a ng-href="project/{{project.metadata.name}}/attach-pvc?deployment={{deployment.metadata.name}}"
                         role="button">Attach Storage</a>
                    </li>
                    <!-- Only allow editing health checks if there is no deployment config or this
                         is the active deployment. -->
                    <li ng-if="(!deploymentConfigName || isActive) && (deployment | canIScale)">
                      <a ng-href="{{healthCheckURL}}" role="button">Edit Health Checks</a>
                    </li>
                    <li ng-if="'replicationcontrollers' | canI : 'update'">
                      <edit-link
                        resource="deployment"
                        kind="ReplicationController"
                        alerts="alerts">
                      </edit-link>
                    </li>
                    <li ng-if="'replicationcontrollers' | canI : 'delete'">
                      <delete-link
                        kind="ReplicationController"
                        type-display-name="deployment"
                        resource-name="{{deployment.metadata.name}}"
                        project-name="{{deployment.metadata.namespace}}"
                        alerts="alerts"
                        rc-replicas="deployment.status.replicas"
                        hpa-list="hpaForRC"
                        redirect-url="{{deployment | configURLForResource}}">
                      </delete-link>
                    </li>
                  </ul>
                </div>
              </h1>
              <labels ng-if="deploymentConfigName" labels="deployment.metadata.labels" clickable="true" kind="deployments" title-kind="deployments for deployment config {{deploymentConfigName}}" project-name="{{deployment.metadata.namespace}}" limit="3" navigate-url="project/{{deployment.metadata.namespace}}/browse/deployments/{{deploymentConfigName}}"></labels>
              <labels ng-if="!deploymentConfigName" labels="deployment.metadata.labels" clickable="true" kind="deployments" project-name="{{deployment.metadata.namespace}}" limit="3"></labels>
            </div>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row" ng-if="deployment">
              <div class="col-md-12">
                <uib-tabset>
                  <uib-tab active="selectedTab.details">
                    <uib-tab-heading>Details</uib-tab-heading>
                    <div class="resource-details">
                      <ng-include src=" 'views/browse/_deployment-details.html' "></ng-include>
                    </div>
                  </uib-tab>
                  <uib-tab heading="Environment" active="selectedTab.environment">
                    <uib-tab-heading>Environment</uib-tab-heading>
                    <div ng-repeat="container in deployment.spec.template.spec.containers">
                      <h3>Container {{container.name}} Environment Variables</h3>
                      <environment env-vars="container.env" ng-if="container.env.length"></environment>
                      <em ng-if="!container.env.length">The container specification has no environment variables set.</em>
                    </div>
                  </uib-tab>
                  <uib-tab ng-if="metricsAvailable" heading="Metrics" active="selectedTab.metrics">
                    <!-- Use ng-if to remove the metrics directive when the tab is not active so
                         we don't update in the background. -->
                    <deployment-metrics
                        ng-if="selectedTab.metrics && podsForDeployment"
                        pods="podsForDeployment" containers="deployment.spec.template.spec.containers">
                    </deployment-metrics>
                  </uib-tab>
                  <uib-tab ng-if="deploymentConfigName && logOptions.version && ('deploymentconfigs/log' | canI : 'get')" active="selectedTab.logs">
                    <uib-tab-heading>Logs</uib-tab-heading>
                    <log-viewer
                      ng-if="selectedTab.logs"
                      follow-affix-top="390"
                      follow-affix-bottom="90"
                      resource="deploymentconfigs/log"
                      name="deploymentConfigName"
                      context="projectContext"
                      options="logOptions"
                      empty="logEmpty"
                      run="logCanRun">

                      <span ng-if="deployment | deploymentStatus">
                        <label>Status:</label>
                        <status-icon status="deployment | deploymentStatus"></status-icon>
                        {{deployment | deploymentStatus}}
                      </span>
                      <div ng-if="deployment.metadata.creationTimestamp && !logEmpty" class="log-timestamps">
                        <div ng-if="(deployment | deploymentStatus) !== 'Deployed'">
                          Log from {{deployment.metadata.creationTimestamp  | date : 'short'}}
                        </div>
                      </div>

                    </log-viewer>
                  </uib-tab>
                  <uib-tab active="selectedTab.events" ng-if="'events' | canI : 'watch'">
                    <uib-tab-heading>Events</uib-tab-heading>
                    <events resource-kind="ReplicationController" resource-name="{{deployment.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>
                  </uib-tab>
                </uib-tabset>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
